<template>
    <div>
        <Card class="card-progress-count">
            <div class="card-header">
                <span class="title">新增用户</span>
                <Dropdown trigger="click">
                    <Icon type="ios-more" size="22" style="cursor: pointer" />
                    <DropdownMenu slot="list">
                        <DropdownItem>查看详情</DropdownItem>
                        <DropdownItem>更多操作</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
            <div class="value">
                <span id="countup4"></span>
            </div>
            <Progress :percent="65" status="success" hide-info style="margin: 20px 0 7px 0" />
            <div class="today">
                <span class="t">总用用户量</span>
                <span class="v">31,235</span>
            </div>
        </Card>
    </div>
</template>

<script>
import { CountUp } from 'countup.js';
export default {
    name: 'cardProgress',
    components: {},
    props: {},
    data() {
        return {};
    },
    methods: {
        init() {
            new CountUp('countup4', 560).start();
        }
    },
    mounted() {
        this.init();
    }
};
</script>
<style lang="less" scoped>
.card-progress-count {
    height: 182px;
    .card-header {
        display: flex;
        height: 22px;
        align-items: center;
        justify-content: space-between;
        color: rgba(0, 0, 0, 0.45);
    }
    .value {
        height: 38px;
        margin-top: 4px;
        margin-bottom: 6px;
        overflow: hidden;
        color: rgba(0, 0, 0, 0.85);
        font-size: 30px;
        line-height: 38px;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    .today {
        margin-top: 8px;
        padding-top: 9px;
        border-top: 1px solid #e8e8e8;
        .v {
            margin-left: 8px;
            color: rgba(0, 0, 0, 0.85);
        }
    }
}
</style>
